<template>
    <PerfectScrollbar>
        <div class="fragments">
            <div
                v-for="(i, index) in snippetStore.fragmentLabels"
                :key="index"
                class="item"
                :class="{ 'is-active': index == snippetStore.fragment }"
                @click="onClickFragment(index)"
            >
                <SnippetsFragmentsInput :name="i" :index="index" />
            </div>
        </div>
    </PerfectScrollbar>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/app'
import { useSnippetStore } from '@/store/snippets'

const snippetStore = useSnippetStore()
const appStore = useAppStore()

const onClickFragment = (index: number) => {
    snippetStore.fragment = index
}

const fragmentHeight = appStore.sizes.editor.fragmentsHeight + 'px'
</script>

<style lang="scss" scoped>
.fragments {
    display: flex;
    align-items: center;
    height: v-bind(fragmentHeight);
    // overflow-y: auto;
    .item {
        padding: 0 var(--spacing-xs);
        display: flex;
        align-items: center;
        height: v-bind(fragmentHeight);
        width: 100%;
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        min-width: 100px;
        &.is-active {
            background-color: var(--color-contrast-lower);
        }
    }
}
</style>
